<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>个人信息页面</title>
    {#    <link rel="stylesheet" href="/static/css/main.css">#}
    <link rel="stylesheet" href="/static/shineflip_min.js">
    <script src="/static/jquery-3.3.1.min.js"></script>
    <style>
        body {
        {#background-image: url("/static/image/bg8.png");#} font: 14px Arial, 'Microsoft YaHei';
            background: white;
            margin: 0px;
            padding: 0px;
        }

        #container {
            background: white;
            display: flex;
            flex-wrap: wrap;
            width: 1200px;
            margin-left: auto;
            margin-right: auto;
        }

        #header {
            width: 860px;
            height: 280px;
            background: white;
            margin-left: 20px;

        }

        #header_top {
            width: 950px;
            height: 300px;
            margin: 0px;
            display: flex;
            background-image: url("/static/image/timg_hui.jpg");
            background-repeat: no-repeat;
            background-size: cover;

        }

        {##header_top img#}
        {#{#}
        {#    padding-top: 60px;#}
        {#    padding-left: 20px;#}
        {#    width: 120px;#}
        {#    height: 120px;#}
        #username {
            color: black;
            margin-top: 65px;
            margin-left: 30px;
            width: 200px;
            height: 30px;
        {#background: white;#}
        }

        #username-ID {
            text-align: center;
            line-height: 1px;
            font-size: 17px;
        }

        #selfhtml {

            margin-right: 10px;
            margin-top: 67px;
            border-radius: 15px;
            border: 1px solid darkgrey;
        {#background: #1a3aff;#} height: 30px;
            width: 90px;
        }

        #selfhtml p {
            line-height: 0px;
            padding-left: 10px;
            font-size: 17px;
        }

        #set {
            margin-right: 19px;
            margin-top: 70px;
            border-radius: 50px;
            background-image: url("../static/image/bg11.jpg");
            background-repeat: no-repeat;
            background-size: contain;
            height: 25px;
            width: 25px;
        }

        #menu ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        #menu ul li {
        {#border: #cccccc 1px solid;#} margin-left: 50px;
            padding-top: 10px;
            width: 120px;
            height: 30px;
            background-image: url("/static/image/bg5.png");
        }

        #menu ul li img {
            float: left;
            padding-left: 10px;
        }

        #menu ul li p {
            line-height: 1px;
            float: left;
            text-align: center;
            padding-left: 10px;
        }

        #content {
            width: 900px;
            margin-left: 20px;
            height: auto;
        }

        #content h1 {
            margin-left: 40px;
        }

        #content hr {
            margin-left: 50px;

            width: 860px;
        }

        #content ul {
            margin: 0px;
            margin-left: 40px;
            padding: 0px;
            list-style: none;
        }

        #content ul li {
            float: left;
            width: 200px;
            height: 190px;
        }

        #content ul li img {
            margin: 10px;
            width: 102px;
            height: 142px;
        }

        .wrap a {
            display: block;
            width: 150px;
            height: 200px;
            text-decoration: none;
            color: #000;
        {#margin-bottom: 50px;#}
        }

        .wrap {
            width: 150px;
            height: 180px;
            position: relative;
            overflow: hidden;
            font-family: arial, sans-serif;
            border: 0;
            margin: 0 10px;
            float: left;
            display: inline;
        }

        .img {
            border: 0;
            position: absolute;
        }

        .wrap i {
            display: block;
            width: 150px;
            height: 180px;
            position: absolute;
            left: 0;
            top: 250px;
            z-index: 1;
            background: black;
            filter: alpha(opacity=40);
            filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);
            opacity: 0.40;
            -webkit-transition: all 0.6s ease-in-out;

        }

        .wrap p {
            display: none;
            width: 155px;
            height: 120px;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 1;
            background: transparent;
            font-size: 12px;
            color: white;
            padding: 0;
            line-height: 16px;
            -webkit-transition: all 0.6s ease-in-out;
        }

        .wrap p b {
            display: none;
            font-size: 18px;
            color: white;
            text-align: center;
            margin-left: 0px;
            margin-top: 10px;
            padding: 0;
            line-height: 30px;
            width: auto;
        }

        .wrap p span {
        {#color: white;#}{#display: block;#}{#padding: 10px;#} line-height: 23px;
            font-size: 18px;
            display: -webkit-box;
            -webkit-line-clamp: 4 行数;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .wrap a:hover {
            background-color: black;
            filter: alpha(opacity=50);
        {#filter: blackscale(20);#} -moz-opacity: 0.8;
            -khtml-opacity: 0.8;
            opacity: 0.8;
            direction: ltr;
        }

        .wrap a:hover .img {
            opacity: 0.5;
        }

        .wrap a:hover i {
            display: block;
        }

        .wrap a:hover p {
            display: block;
        }

        #nocase{
            margin-top: 100px;
            margin-left: 260px;
        }
        #note span{
            font-size: large;
            margin-left: 55px;
            color: #e0dcff;
        }

    </style>

    <style>
        html, body {
            padding: 0px;
            margin: 0px;
            font-family: 'Raleway', sans-serif;
            height: 100%;
        }

        .container {
            width: 200px;
            max-width: 200px;
            background: rgba(0, 0, 0, 0.75);
            margin: 20px auto;
            margin-top: 0;
            margin-right: 20px;
            padding: 10px 0px 20px 0px;
            border: 1px solid #111;
            border-radius: 4px;
            box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.75);
        }

        .link {
            font-size: 16px;
            font-weight: 300;
            text-align: center;
            position: relative;
            height: 40px;
            line-height: 40px;
            margin-top: 14px;
            overflow: hidden;
            width: 90%;
            margin-left: 5%;
            cursor: pointer;
        }

        .link:after {
            content: '';
            position: absolute;
            width: 80%;
            border-bottom: 1px solid rgba(255, 255, 255, 0.5);
            bottom: 50%;
            left: -100%;
            transition-delay: all 0.5s;
            transition: all 0.5s;
        }

        .link:hover:after,
        .link.hover:after {
            left: 100%;
        }

        .link .text {
            text-shadow: 0px -40px 0px rgba(255, 255, 255, 1);
            transition: all 0.75s;
            transform: translateY(100%) translateZ(0);
            transition-delay: all 0.25s;
        }

        .link:hover .text,
        .link.hover .text {
            text-shadow: 0px -40px 0px rgba(255, 255, 255, 0);
            transform: translateY(0%) translateZ(0) scale(1.1);
            font-weight: 600;
        }

        .text a {
            color: white;
            transition: all 0.6s;
            text-decoration: none;
        }

        #introduction {
        {#background-image: url("/static/image/bg10.png");#} width: 600px;
            height: auto;
            border-radius: 5px;
        {#border: 1px white solid;#} overflow: hidden;
            font-size: 16px;
            float: left;
            margin: 0
        }

        #introduction p {
            white-space: normal;
            word-break: break-all;
            word-wrap: break-word;
            color: black;
            font-family: 宋体;
            font-size: 16.5px;
        }

        .shanchu {
            cursor: pointer;
        }

        #myinfo li {
            margin-top: 50px;
            margin-left: 200px;
            height: 50px;
            clear: both
        }

        #showmybook:hover {
            cursor: pointer;
        }

        #showmyinfo:hover {
            cursor: pointer;
        }

        #ensure {
            border: 3px solid #ccc;
            border-radius: 5px;
            background: #fff;
            font-size: 20px;
            width: 500px;
            height: 250px;
            position: fixed;
            top: 50%;
            left: 50%;
            margin: -125px 0 0 -150px;
            text-align: center;
            z-index: 999;
        }

        #votetip p {
            padding: 5px;
            font-size: 16px;
            color: red;
            text-align: center;
        }

        #queren {
            width: 130px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            border: 1px solid #e6e6e6;
            margin-top: 30px;
            margin-left: 90px;
            background-color: red;
            color: white;
            cursor: pointer;
        }

        #quxiao {
            width: 130px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            border: 1px solid #e6e6e6;
            margin-top: 30px;
            margin-left: 90px;
            background-color: red;
            color: white;
            cursor: pointer;
        }

        #disappare {
            border: 3px solid #ccc;
            border-radius: 5px;
            background: #fff;
            font-size: 20px;
            width: 300px;
            height: 60px;
            position: fixed;
            z-index: 9999;
            top: 50%;
            left: 50%;
            margin: -125px 0 0 -150px;
            text-align: center;
        }

        #disappare p {
            padding: 5px;
            font-size: 16px;
            color: red;
            text-align: center;
        }
    </style>
    <script>
        $(function () {
            $("#quxiao").click(function () {
                $("#ensure").css("display", "none")
            })
        });


        $(function () {
            $(".shanchu").click(function () {
                $("#ensure").css("display", "block")
                var val = $(this).attr("name");

                $("#queren").click(function () {
                    $.ajax({
                        type: 'GET',
                        url: "/self/",
                        data: {'book': val},
                        success: function (data) {
                            $("#" + val).remove();
                            $("#disappare").show().delay(3000).hide(300);
                            $("#ensure").css("display", "none")
                        }
                    })
                });
            })
        });
    </script>
</head>
<body>
<div id="container">
    <div id="disappare" style="display: none;">
        <p>删除成功！</p>
    </div>
    <div id="ensure" style="display: none">
        <p>是否删除！</p>
        <div style="display: flex;">
            <div id="quxiao">取消</div>
            <div id="queren">确认删除</div>
        </div>
    </div>
    <iframe src="/Header/" frameborder="0" width="1200px" height="123.5px"></iframe>
    <div id="header">
        <div id="header_top">
            <div style="display:flex;">
                <div style="padding: 50px">
                    {#                    <input type="file" id="btn_file3" name="consignerRdFile">#}
                    {#                           accept="image/jpg,image/jpeg,image/gif,image/png" style="display:none"#}
                    {#                           onchange="imgChange(event,'consignerRdSign')">#}
                    <img id="consignerRdSign" src="{{ user.user_image }}" width="150px" height="150px"
                         style="border-radius: 100px">
                </div>

                <div id="username" style="margin-left: 30px;margin-top: 70px">
                    <p id="username-ID">书友ID:{{ user.user_account }}</p>
                    <div id="introduction" style="margin: 20px;margin-top: 30px"><p
                            style="margin:0px;text-align: left;height: auto;width: 600px;font-weight: bold;color: #0a0a13"
                    >{{ user.user_introduction }}</p>
                    </div>
                    <hr style="margin-left: 20px;width: 600px;height: 0.7px;color:gray;background: gray;border-radius: 5px">
                    <div style="margin-left: 20px;display: flex;width: 500px">
                        <p style="width: auto;margin-right: 50px">关注:<span
                                style="margin-left: 10px;font-size: 22px;color: red;font-family: 微软雅黑">{{ guanzhushu }}</span>
                        </p>
                        <p style=" width:auto;margin-right: 50px">粉丝:<span
                                style="margin-left: 10px;font-size: 22px;color: red;font-family: 微软雅黑">{{ fensishu }}</span>
                        </p>
                        <p style=" width:auto;margin-right: 50px">推荐票:<span
                                style="margin-left: 10px;font-size: 22px;color: red;font-family: 微软雅黑">{{ user.user_votes }}</span>
                        </p>
                    </div>
                </div>

                <div style=";width:400px ">
                    {#                        <div id="selfhtml" style="float: right;margin-right: 60px;color: white">#}
                    {#                            <p>个人主页</p>#}
                    {#                        </div>#}
                    <a href="/selfset/" style="float: right">
                        <div id="set">
                        </div>
                    </a>
                </div>

            </div>
        </div>
    </div>
    <div class="container">
        <div class="link">
            <div class="text"><a href="/main/">首页</a></div>
        </div>
        <div class="link">
            <div class="text"><a href="/self/">我的书架</a></div>
        </div>
        <div class="link">
            <div class="text"><a href="/shoplog/">用户记录</a></div>
        </div>
        <div class="link">
            <div class="text"><a href="/author/">作家专区</a></div>
        </div>
        <div class="link">
            <div class="text"><a href="/MyTalk/?user_id={{ user.user_id }}">我的书评</a></div>
        </div>
        {#        <div class="link">#}
        {#            <div class="text"><a href="">联系我们</a></div>#}
        {#        </div>#}
    </div>
    {#        <ul>#}
    {#            <li><img src="/static/image/m1.png" alt="">#}
    {#                <a href="/main/"><p>首页</p></a></li>#}
    {#            <li><img src="/static/image/m6.png" alt="">#}
    {#                <a href=""><p>我的书架</p></a></li>#}
    {#            <li><a href="/shoplog/"><img src="/static/image/m4.png" alt="">#}
    {#                <p>交易记录</p></a></li>#}
    {#            <li><img src="/static/image/m5.png" alt="">#}
    {#                <a href=""><p>作家专区</p></a></li>#}
    {#            <li><img src="/static/image/m3.png" alt="">#}
    {#                <a href=""><p>投票记录</p></a></li>#}
    {#            <li><img src="/static/image/m2.png" alt="">#}
    {#                <a href="/MyTalk/"><p>我的书评</p></a></li>#}
    {#        </ul>#}

    <div id="content">
        {#        <div style="display:flex;">#}
        {#            <div style="border: 1px black solid;width: 180px;height: 180px;margin-right: 40px;margin-bottom: 20px">#}
        {#                <img src="/static/image/guanzhu.png" alt="" style="width: 25px;height: 25px">#}
        {#                <p>我的关注</p>#}
        {#                <p>{{ guanzhushu}}<span>人</span></p>#}
        {#            </div>#}
        {#            <div style="border: 1px black solid;width: 180px;height: 180px;margin-right: 40px;margin-bottom: 20px"></div>#}
        {#                <img src="/static/image/fensi.png" alt="" style="width: 25px;height: 25px">#}
        {#                <p>我的粉丝</p>#}
        {#                <p>{{ fensishu}}<span>人</span></p>#}
        {#            <div style="border: 1px black solid;width: 180px;height: 180px;margin-right: 40px;margin-bottom: 20px"></div>#}
        {#            <div style="border: 1px black solid;width: 180px;height: 180px;margin-right: 40px;margin-bottom: 20px"></div>#}
        {#        </div>#}
        <div style="display: flex">
            <div id="showmybook" style="border-left:1px solid #e5e5e5;
            border-top:1px solid red;
            border-bottom:2px solid white;
           border-right:1px solid #e5e5e5;
           border-radius:5px">
                <h1 style="color: black;width: auto;margin-left: 0px">我的书架</h1>
            </div>
            <div id="showmyinfo" style="margin-left: 20px">
                <h1 style="color: black;width:auto;margin-left: 0px">个人资料</h1>
            </div>
        </div>
        <hr style="margin-top: 0;margin-left: 0px;width: 900px;color: #e5e5e5">
        <ul id="mybook">
            {% if a != 0 %}
                {% for row in book_list %}
                    <li id="{{ row.book_id }}" class="wrap" style="width: 150px;margin: 30px;height: 280px">
                        <a href="/Details/?book_id={{ row.book_id }}">
                            <div class="img">
                                <img style="width:130px;height:180px" alt="" src={{ row.book_image }}>
                            </div>
                            <p><b>{{ row.book_name }}</b><span style="height:90px">{{ row.book_introduction }}</span>
                            </p>
                        </a>
                        <span style="margin-top:30px;font-size: 18.5px;margin-left: 20px;margin-right:40px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"><strong>{{ row.book_name }}</strong></span>
                        <span name="{{ row.book_id }}" class="shanchu" id="{{ row.book_name }}"
                              style="margin-left:60px;margin-top:20px;border: 1px black solid;border-radius: 5px;background: #e5e5e5">删除</span>
                    </li>
                {% endfor %}
            {% else %}
                  <div id="nocase">
                <div><img src="/static/image/nonebook2.png"></div>
                <div id="note"><span>书架为空!!!</span></div>
                </div>
            {% endif %}
        </ul>
        <ul id="myinfo" style="margin-top:0px;display: none">
            <li style="color: #636769;height:40px;width: 600px;margin-left: 150px;margin-top: 10px"><span
                    style="margin-right: 50px">昵称:</span>{{ user.user_name }}</li>
            <li style="color: #636769;height:40px;width: 600px;margin-left: 150px;margin-top: 10px"><span
                    style="margin-right: 50px">性别:</span>{{ user.user_sex }}</li>
            <li style="color: #636769;height:40px;width: 600px;margin-left: 150px;margin-top: 10px"><span
                    style="margin-right: 35px">现居地:</span>
                {% if user.user_address != '请选择省/市-请选择城市-请选择区/县' %}
                    {{ user.user_address }}
                {% else %}
                    无
                {% endif %}</li>
            <li style="color: #636769;height:40px;width: 600px;margin-left: 150px;margin-top: 10px"><span
                    style="margin-right: 50px">生日:</span>{{ user.user_birth }}</li>
            <li style="overflow: hidden;textoverflow:ellipsis;white-space: nowrap; color: #636769;height:auto;width: 600px;margin-left: 150px;margin-top: 10px;margin-bottom: 20px;height: auto">
                <span style="margin-right: 23px;width: auto">个人简介:</span>{{ user.user_introduction }}</li>
        </ul>
        <hr style=" margin-left: 0px;color: #e5e5e5;width: 900px">


    </div>
    <div style="width:200px;height: 400px;float: right;margin-left:60px;margin-top:60px">
        <ul style="margin-left:10px;list-style: none;padding-left: 0px">
            <li style="font-family: 微软雅黑;font-size: 18px;border-bottom:1.5px solid black;height: 30px">
                我的关注<span id="shensuo"><img src="/static/image/xiala.png" alt="" id="xiala"
                                            style="margin-bottom:0;margin-left:5px;width: 20px;height: 20px;border-radius: 100px"></span><a
                    href="/guanzhufensi/?zhuangtai=guanzhu"
                    style="text-decoration: none;color: black;font-size: 14px;margin-left: 10px">更多</a></li>
            <li>
                <ul style="margin-left:5px;margin-top:10px;padding: 0px" id="myguanzhu">
                    {% for row in myguanzhu %}
                        <li style="display: flex;height: 80px;padding-bottom: 5px">
                            <a href="/author_look/?user_id={{ row.user_id }}"
                               style="display: flex;text-decoration: none;font-family: 微软雅黑;color: black"><img
                                    src="{{ row.user_image }}" alt=""
                                    style="width: 75px;height: 75px;border-radius:100px;margin-left: 0px ">
                                <p style="margin-top: 50px;overflow: hidden;height: 20px">{{ row.user_name }}</p></a>
                        </li>
                    {% endfor %}
                </ul>
            </li>
            <li style="font-family: 微软雅黑;font-size: 18px;border-bottom:1.5px solid black;height: 30px">
                我的粉丝<span id="shensuo1"><img src="/static/image/xiala.png" alt="" id="xiala1"
                                             style="margin-bottom:0;margin-left:5px;width: 20px;height: 20px;border-radius: 100px"></span><a
                    href="/guanzhufensi/?zhuangtai=fensi"
                    style="text-decoration: none;color: black;font-size: 14px;margin-left: 10px">更多</a></li>
            <li>
                <ul style="margin-left:5px;margin-top:10px;padding: 0px" id="myfensi">
                    {% for row in myfensi %}
                        <li style="display: flex;height: 80px;padding-bottom: 5px">
                            <a href="/author_look/?user_id={{ row.user_id }}"
                               style="display: flex;text-decoration: none;font-family: 微软雅黑;color: black"><img
                                    src="{{ row.user_image }}" alt=""
                                    style="width:75px;height: 75px;border-radius:100px;margin-left: 0px ">
                                <p style="margin-top: 50px;overflow: hidden;height: 20px">{{ row.user_name }}</p></a>
                        </li>
                    {% endfor %}
                </ul>
            </li>
        </ul>
    </div>
</div>
</body>
<script>
    //For Demo only
    var links = document.getElementsByClassName('link')
    for (var i = 0; i <= links.length; i++)
        addClass(i)


    function addClass(id) {
        setTimeout(function () {
            if (id > 0) links[id - 1].classList.remove('hover')
            links[id].classList.add('hover')
        }, id * 750)
    }
</script>

{#关注#}
<script type="text/javascript">
    $(document).ready(function () {
        $("#guanzhu_look").click(function () {
            $("#myguanzhu").slideToggle("slow");
        });
    });

    $(document).ready(function () {
        $("#shensuo").click(function () {
            $("#myguanzhu").slideToggle("slow");
            if ($("#xiala").attr('src') == '/static/image/xiala.png') {
                $("#xiala").attr('src', '/static/image/shangla.png')
            } else {
                $("#xiala").attr('src', '/static/image/xiala.png')
            }
        });
    });

    $(document).ready(function () {
        $("#shensuo1").click(function () {
            $("#myfensi").slideToggle("slow");
            if ($("#xiala1").attr('src') == '/static/image/xiala.png') {
                $("#xiala1").attr('src', '/static/image/shangla.png')
            } else {
                $("#xiala1").attr('src', '/static/image/xiala.png')
            }
        });
    });

    $(document).ready(function () {
        $("#showmybook").click(function () {
            $("#mybook").show("slow");
            $("#myinfo").hide("slow");
            $("#showmybook").css({'border-left': '1px solid #e5e5e5'});
            $("#showmybook").css({'border-top': '1px solid red'});
            $("#showmybook").css({'border-bottom': '2px solid white'});
            $("#showmybook").css({'border-right': '1px solid #e5e5e5'});
            $("#showmybook").css({'border-radius': '5px'});
            $("#showmyinfo").css({'border-left': '1px solid white'});
            $("#showmyinfo").css({'border-top': '1px solid white'});
            $("#showmyinfo").css({'border-bottom': '2px solid white'});
            $("#showmyinfo").css({'border-right': '1px solid white'});
        });
    });
    $(document).ready(function () {
        $("#showmyinfo").click(function () {
            $("#mybook").hide("slow");
            $("#myinfo").show("slow");
            $("#showmyinfo").css({'border-left': '1px solid #e5e5e5'});
            $("#showmyinfo").css({'border-top': '1px solid red'});
            $("#showmyinfo").css({'border-bottom': '2px solid white'});
            $("#showmyinfo").css({'border-right': '1px solid #e5e5e5'});
            $("#showmyinfo").css({'border-radius': '5px'});
            $("#showmybook").css({'border-left': '1px solid white'});
            $("#showmybook").css({'border-top': '1px solid white'});
            $("#showmybook").css({'border-bottom': '2px solid white'});
            $("#showmybook").css({'border-right': '1px solid white'});
        });
    });
</script>

</html>